<template>
	<view>
		<top-navbar title="开票中心" :isBack="!isHome" :isHome="isHome"></top-navbar>
		<view class="my-order">
			<view class="list">
				<checkbox-group @change="checkboxChange">
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<view >
						<view class="title acea-row row-between-wrapper" >
							<view class="">
								<!-- #ifndef MP -->
								<checkbox :value="(item.id).toString()" :checked="item.checked"
									:disabled="!item.attrStatus && footerswitch" />
								<!-- #endif -->
								<!-- #ifdef MP -->
								<checkbox :value="item.id" :checked="item.checked"
									:disabled="!item.attrStatus && footerswitch" />
									<!-- #endif -->
							</view>
							<view class="acea-row row-middle">
								<text class="sign cart-color acea-row row-center-wrapper"
									v-if="item.bargain_id != 0">砍价</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.combination_id != 0">拼团</text>
								<text class="sign cart-color acea-row row-center-wrapper"
									v-else-if="item.seckill_id != 0">秒杀</text>
								<text v-else>{{ item.module_type == 2 ? '门店' : '商城'}}</text>
								<text class="font-color-green"
									v-if="item.shipping_type == 2 && item.module_type == 1">-自提</text>
								<text
									style="font-size: 24rpx; color: #999; margin-left: 10rpx;">{{ item._add_time }}</text>
								<text class="gift" v-if="item.transfer_id > 0">礼物</text>
							</view>
						</view>
						<view class="item-info acea-row row-between row-top" v-for="(itemn, ind) in item.cartInfo"
							:key="ind">
							<view class="pictrue">
								<image :src="itemn.productInfo.image" v-if="itemn.productInfo"></image>
								<image :src="itemn.image" v-else></image>
							</view>
							<view class="">
								<view class="text acea-row row-between" v-if="itemn.productInfo">
									<view class="name line2">{{ itemn.productInfo.store_name }}</view>
									<view class="money">
										<view v-if="itemn.productInfo.attrInfo">
											￥{{ itemn.productInfo.attrInfo.price }}</view>
										<view v-else>￥{{ itemn.productInfo.price }}</view>
										<view>x{{ itemn.cart_num }}</view>
									</view>
								</view>
								<view class="text acea-row row-between" v-else style="margin-bottom: 30rpx;">
									<view class="name line2">{{ itemn.title }}</view>
									<view class="money">
										<view v-if="itemn.price">￥{{ itemn.price }}</view>
										<view></view>
									</view>
								</view>
								<!-- 门店商品 -->
								<view v-if="itemn.shopProductInfo && item.module_type == 2"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.shopAttrInfo.suk }}
								</view>
								<!-- 商城商品 -->
								<view v-if="itemn.productInfo && item.module_type == 1"
									style="font-size: 24rpx; color: #999;">
									{{ itemn.productInfo.attrInfo.suk }}
								</view>
								<!-- 券包 -->
								<view class="acea-row row-between" style="font-size: 24rpx; color: #999;"
									v-if="itemn.couponData">
									<text>包含{{ itemn.couponData.length }}张券</text>
									<text>共1件</text>
								</view>
							</view>
						</view>
						<view class="totalPrice">
							共{{ item.cartInfo.length || 0 }}件商品，总金额
							<text class="money font-color">￥{{ item.pay_price }}</text>
							<view class="">

								{{item.pay_type==="weixin"?'微信支付':item.pay_type==="yue"?'余额支付':'线下'}}
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
			</view>
			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage title="暂无订单~"></emptyPage>
			</view>
			<view class="" style="height:200rpx;">
				
			</view>
		</view>
		<view class="evtbottom">
			<view class="btns">
				<view class="btn-item" @click="gokailist">
					开票记录
				</view>
				<view class="btn-item" @click="isshowshouming = true">
					开票说明
				</view>
			</view>
			<view class="eventbom">
				<view class="chball">
					<view class="chbcon">
						<checkbox-group @change="checkboxAllChange" class="flex row-bottom">
							<checkbox value="all" :checked="!!isAllSelect" />
							<text class='checkAll'>全选({{selectValue.length}})</text>
						</checkbox-group>
					</view>
					<view class="priceall">
						<text>开票金额</text>
						<text class="priceallprice">￥{{selectCountPrice}}</text>
					</view>
				</view>
				<view class="btnnext" @click="jumpkaipiao">
					下一步
				</view>
			</view>
		</view>
		<view class="kaishuo" v-if="isshowshouming">
			<view class="shuombox">
				<view class="title">
					开票说明
				</view>
				<view class="shuocon">
					{{shuoming}}
				</view>
				<view class="iknow" @click="isshowshouming = false">
					我知道了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS || MP
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 43;
	// #endif
	// #ifndef APP-PLUS || MP
	let sysHeight = 0;
	// #endif
	import {
		getUserInfo,
		invoiceorderlist,invoiceconfig
	} from '@/api/user.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import navBar from '@/components/top-navbar/top-navbar'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			emptyPage,
			navBar,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				isAllSelect: false, //全选
				selectValue: [], //选中的数据
				selectCountPrice: 0.00,
				sysHeight: sysHeight,
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				page: 1,
				limit: 20,
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: '使用微信快捷支付',
						payStatus: true
					},
					{
						name: '支付宝支付',
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: '使用线上支付宝支付',
						payStatus: true
					},
					{
						name: '余额支付',
						icon: 'icon-yuezhifu',
						value: 'yue',
						title: '当前可用余额：',
						number: 0,
						payStatus: true
					}
				],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				isHome: false,
				shuoming:'',
				isshowshouming:false,
				invoice_func_status:0
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			
			if (this.isLogin) {
				console.log(2324,"加载")
				this.loadend = false
				this.loading = false
				this.isAllSelect= false, //全选
				this.selectValue= [], //选中的数据
				this.selectCountPrice= 0.00,
				this.getOrderList('init');
				this.getinvoiceconfig()
			} else {
				toLogin();
			}
		},
		onLoad(options) {
			if (options.status) this.orderStatus = options.status;
			if (options.home) this.isHome = options.home;
		},
		methods: {
			// 获取发票说明
			async getinvoiceconfig(){
				var res = await invoiceconfig()
				this.invoice_func_status = res.data.invoice_func_status
				this.shuoming = res.data.invoice_description
			},
			// 跳转到开票中心
			gokailist(){
				uni.navigateTo({ 
					url:'/pages/users/user_invoice_list/index'
					// url:'/pages/users/user_kaipiao_list/index'
				})
			},
			// 判断这个值是否在这个数组中
			inArray: function(search, array) {
				for (let i in array) {
					if (array[i] == search) {
						return true;
					}
				}
				return false;
			},
			// 全选改变
			checkboxAllChange: function(event) {
				let value = event.detail.value;
				if (value.length > 0) {
					
					this.setAllSelectValue(1)
				} else {
					this.setAllSelectValue(0)
				}
			},
			// 全选
			setAllSelectValue: function(status) {
				let that = this;
				let selectValue = [];
				let valid = that.orderList;
				if (valid.length > 0) { // 如果当前有商品才执行
					let newValid = valid.map(item => {
						if (status) {
							item.checked = true;
							selectValue.push(item.id);
							that.isAllSelect = true;
						} else {
							item.checked = false;
							that.isAllSelect = false;
						}
						return item;
					});
					that.$set(that, 'orderList', newValid);
					that.selectValue = selectValue;
					that.switchSelect();
				}
			},
			checkboxChange: function(event) {
				let that = this;
				let value = event.detail.value;
				let valid = that.orderList;
				
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				let newValid = valid.map(item => {
					// 如果这个id 在选中的数组中 
					if (that.inArray(item.id, value)) {
								item.checked = true;
								arr1.push(item);
					} else {
						//如果这个id不在选中的数组中 
						item.checked = false;
						arr2.push(item);
					}
					return item;
				});
				that.$set(that, 'orderList', newValid);
				that.isAllSelect = newValid.length === arr1.length ;
				that.selectValue = value;
				that.switchSelect();
			},
			// 选择之后更新数据 价格
			switchSelect: function() {
				let that = this;
				let validList = that.orderList;
				let selectValue = that.selectValue;
				let selectCountPrice = 0.00;
				if (selectValue.length < 1) {
					that.selectCountPrice = selectCountPrice;
				} else {
					for (let index in validList) {
						if (that.inArray(validList[index].id, selectValue)) {
							selectCountPrice = that.$util.$h.Add(selectCountPrice, that.$util.$h.Mul(1, validList[index].total_price))
							
						}
					}
					that.selectCountPrice = selectCountPrice;
				}
			},
			//下一步开票
			jumpkaipiao() {
				var ids = this.selectValue.join()
				if(this.invoice_func_status != "1"){
					return uni.showToast({
						title:"开票功能暂未开启",
						icon:"none"
					})
				} 
				if(ids==''){
					return uni.showToast({
						title:"请先选择",
						icon:"none"
					})
				}
				uni.navigateTo({
					url: '/pages/users/user_app_kaipiao/index?ids='+ids
				})
			},
			onLoadFun() {
				this.getOrderList();
				this.getUserInfo();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			/**
			 * 获取用户信息
			 *
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.payMode[2].number = res.data.now_money;
					that.$set(that, 'payMode', that.payMode);
				});
			},
			/**
			 * 关闭支付组件
			 *
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 生命周期函数--监听页面加载
			 */



			/**
			 * 获取订单列表
			 */
			getOrderList: function(init) {
				let that = this;
				if(init==="init"){
					that.loadend = false
					that.loading = false
					that.loadTitle = '';
					that.page = 1
					that.orderList=[]
				}
				
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '加载更多';
				invoiceorderlist({
						page: that.page,
						limit: that.limit
					})
					.then(res => {
						let list = res.data || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = '加载更多';
					});
			},


		},
		onReachBottom: function() {
			this.getOrderList();
		}
	};
</script>

<style scoped lang="scss">
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
	}

	.font-color-green {
		color: #95c51b;
	}

	.font-color-gray {
		color: #999;
	}

	.my-order .header .picTxt {
		height: 190rpx;
	}

	.gift {
		background-color: #9AC83A;
		color: #fff;
		font-size: 24rpx;
		padding: 0 10rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}

	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}

	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.my-order .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}

	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-order .nav {
		position: sticky;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		border-radius: 6rpx;
		margin: 0 auto 0 auto;
		z-index: 99;
	}

	.my-order .nav .item {
		display: flex;
		align-items: center;
		height: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		// padding: 27rpx 0;
		border-bottom: 5rpx solid transparent;
	}

	.my-order .nav .item.on {
		/* #ifdef H5 || MP */
		font-weight: bold;
		/* #endif */
		/* #ifdef APP-PLUS */
		color: #000;
		/* #endif */
		border-color: #95c51b;
		color: #95c51b;
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}

	.my-order .list {
		width: 710rpx;
		margin: 14rpx auto 0 auto;
	}

	.my-order .list .item {
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 14rpx;
		border: 1px solid #eee;
	}

	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
		justify-content: flex-start;
		
	}

	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 7rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}

	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}

	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}

	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.my-order .list .item .item-info .text {
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.my-order .list .item .item-info .text .name {
		width: 306rpx;
		color: #282828;
	}

	.my-order .list .item .item-info .text .money {
		text-align: right;
	}

	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
	}

	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}

	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}

	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}

	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}

	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}

	.line2 {
		word-break: break-all;
	}

	.bottom {
		.bg-green {
			background-color: #a0cd43;
		}
	}


	.evtbottom {
		background-color: #fff;
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;

		.btns {
			padding: 16rpx 0;
			border-bottom: 2rpx solid #ddd;
			display: flex;
			width: calc(100vw - 80rpx);
			box-sizing: border-box;
			margin: auto;

			.btn-item {
				text-align: center;
				margin-right: 30rpx;
				width: 164rpx;
				height: 57rpx;
				line-height: 57rpx;
				border: 1px solid #BFBFBF;
				border-radius: 100rpx;
				font-size: 22rpx;
				font-weight: 300;
				color: #666666;
			}
		}

		.eventbom {
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;
			padding-bottom: 15rpx;

			.chball {
				width: calc(100% - 200rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 40rpx;
				padding-right: 40rpx;

				.chbcon {
					display: flex;
					align-items: center;

					.qx {
						font-size: 26rpx;
						font-weight: 300;
						color: #B7B6B6;
					}
				}

				.priceall {
					font-size: 26rpx;
					font-weight: 300;
					color: #B7B6B6;

					.priceallprice {
						font-size: 30rpx;
						font-weight: 400;
						color: #666666;
						padding-left: 10rpx;
					}
				}
			}

			.btnnext {
				font-weight: bold;
				background-color: #F59A23;
				width: 207rpx;
				height: 77rpx;
				line-height: 77rpx;
				background: #95C51B;
				box-shadow: 0px 3rpx 5rpx 0px rgba(199, 237, 103, 0.94);
				border-radius: 39rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 30rpx;
			}
		}
	}
	
	.kaishuo{
		position:fixed;
		z-index:999;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		background-color:rgba(0,0,0,.5);
		display:flex;
		align-items: center;
		justify-content: center;
		
		.shuombox{
			background-color:#fff;
			width:80%;
			min-height:300rpx;
			box-sizing: border-box;
			padding:0 20rpx;
			border-radius:10rpx;
			.title{
				text-align: center;
				padding:30rpx 0;
				font-size:38rpx;
			}
			.shuocon{
				font-size:32rpx;
				overflow-y:auto;
				min-height:300rpx;
				max-height:650rpx;
				padding:10rpx 10rpx 20rpx;
			}
			.iknow{
				font-weight: bold;
				background-color: #F59A23;
				width: 207rpx;
				height: 77rpx;
				line-height: 77rpx;
				background: #95C51B;
				border-radius: 39rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 30rpx;
				margin:30rpx auto;
				
			}
		}
	}
</style>
